<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品详情</title>
<jsp:include page="header.jsp"></jsp:include>
<style>
	.promotion-foot-menu-home{
		background:url(/images/footer01.png) no-repeat; 
		background-size:22px;
	}
	#tab3 {
		background-color: #fff;
	}
	.my-pic-pi {
		width: 100%;
	}
	.my-pic-pi img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.my-blank {
		width: 100%;
		height: 42px;
		background-color: #fff;
	}
</style>
</head>
<body ontouchstart>
	<!--主体-->
	<div class="weui-content">
		<!--产品详情-->
		<div class="weui-tab">
			<div class="weui-navbar"
				style="position: fixed; top: 0; left: 0; right: 0; height: 44px;">
				<a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on"
					href="#tab1">商品</a> <a class="weui-navbar__item proinfo-tab-tit"
					href="#tab2">详情</a> <a class="weui-navbar__item proinfo-tab-tit"
					href="#tab3" id="my_pi">检验报告</a>
			</div>
			<div class="weui-tab__bd proinfo-tab-con">
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<!--主图轮播-->
					<div class="swiper-container swiper-zhutu">
						<div class="swiper-wrapper">
							<c:if test="${not empty list}">
							<c:forEach var="bb" items="${list}" varStatus="st">
							<div class="swiper-slide">
								<img src="${bb}" />
							</div>
							</c:forEach>
							</c:if>
						</div>
						<div class="swiper-pagination swiper-zhutu-pagination"></div>
					</div>
					<div class="wy-media-box-nomg weui-media-box_text">
						<h4 class="wy-media-box__title">${item.goodsName}</h4>
						<div class="wy-pro-pri mg-tb-5">
							¥<em class="num font-20">${item.goodsPrice}</em>
						</div>
						<!-- <p class="weui-media-box__desc"></p> -->
					</div>
					<div class="wy-media-box2 txtpd weui-media-box_text">
						<div class="weui-media-box_appmsg">
							<div class="weui-media-box__hd proinfo-txt-l">
								<span class="promotion-label-tit">规格</span>
							</div>
							<div class="weui-media-box__bd">
								<div class="promotion-message clear">
									<span class="promotion-item-text">${item.goodsType}</span> 
								</div>
							</div>
						</div>
						<div class="weui-media-box_appmsg">
							<div class="weui-media-box__hd proinfo-txt-l">
								<span class="promotion-label-tit">库存</span>
							</div>
							<div class="weui-media-box__bd">
								<div class="promotion-message clear">
									<span class="promotion-item-text">${item.goodsStorge}<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span>
								</div>
							</div>
						</div>
						<div class="weui-media-box_appmsg">
							<div class="weui-media-box__hd proinfo-txt-l">
								<span class="promotion-label-tit">厂家</span>
							</div>
							<div class="weui-media-box__bd">
								<div class="promotion-message clear">
									<span class="promotion-item-text">${item.goodsPoint}</span>
								</div>
							</div>
						</div>
				</div>
				<div class="wy-media-box2 txtpd weui-media-box_text">
					<div class="weui-media-box_appmsg">
							<div class="weui-media-box__hd proinfo-txt-l">
								<span class="promotion-label-tit">数量</span>
							</div>
							<div class="weui-media-box__bd">
								<div class="pro-amount fr">
									<div id="spinner-amount" class="Spinner"></div>
								</div>
							</div>
						</div>
				</div>
				<!-- <div class="pro-amount fr">
					<div id="spinner-amount" class="Spinner"></div>
				</div> -->
				</div>
				<div id="tab2" class="weui-tab__bd-item ">
					<div class="pro-detail">
						${item.goodsDetail}
					</div>
				</div>
				<div id="tab3" class="weui-tab__bd-item">
					
			<div class="weui-cell weui-cell_select weui-cell_select-after">
		        <div class="weui-cell__hd">
		          <label for="" class="weui-label">批号</label>
		        </div>
		        <div class="weui-cell__bd">
		          <select class="weui-select" name="select2" id="my_ss">
		          </select>
		        </div>
		      </div>
		       <div class="my-pic-pi" id="my_img">
		       		
		       </div>
    </div>

				</div>
			</div>
		</div>
	<div class="my-blank"></div>
	<!--底部导航-->
	<div class="weui-tabbar wy-foot-menu">
		<a href="/phone/shop" class="promotion-foot-menu-items">
			<div class="weui-tabbar__icon promotion-foot-menu-home"></div>
			<p class="weui-tabbar__label">首页</p>
		</a>  <a href="/phone/cart" class="promotion-foot-menu-items" id="my_tent"> 
			
			<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;" id="cart_sum">
				${cartNum}
			</span>
			
			<div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
			<p class="weui-tabbar__label">购物车</p>
		</a> <a href="javascript:;"
			class="weui-tabbar__item yellow-color open-popup"
			data-target="#join_cart" id="my_cart">
			<p class="promotion-foot-menu-label">加入购物车</p>
		</a> <a href="javascript:;" class="weui-tabbar__item red-color open-popup"
			data-target="#selcet_sku" id="my_buy">
			<p class="promotion-foot-menu-label">立即购买</p>
		</a>
	</div>
	
	<jsp:include page="foot.jsp"></jsp:include>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.Spinner.js"></script>
	<script>
$(".swiper-zhutu").swiper({
        loop: true,
		paginationType:'fraction',
        autoplay:5000
      });
</script>
	<script>
$(function(){
	$(".promotion-sku li").click(function(){
		$(this).addClass("active").siblings("li").removeClass("active");
		})
	})
</script>	
<script>
$(function(){
	var mm =${item.goodsStorge};
	var sp=$(".Spinner");
	sp.Spinner({value:1, len:3, max:mm});
})
$('#my_buy').click(function(){
	var id =${item.id};
	var num =$('.Spinner input').val();
	$.post('/phone/addOrder',{
		id:id,
		storage:num
		},function(data){
			if("error"!=data){
				var url ="/phone/toOrder?id="+data;
				window.location.href=url;
			}
		});
});

$('#my_cart').click(function(){
	var goodsId =${item.id};;
	var test =$('.Spinner input').val();
	//var list =$('select').val();
	$.post('/phone/addCart',{
	id:goodsId,
	test:test
	},function(data){
		if("ok"==data){
			$.alert("添加购物车成功!");
			var cartSum =$('#cart_sum').html();
			if(cartSum!=''){
				var sum =parseInt(cartSum)+1;
				$('#cart_sum').html(sum);
			}
		}else{
			$.alert("添加购物车失败!");
		}
});
});

$("#my_pi").click(function(){
	var id =${item.id};
	var url ="/phone/report?id="+id;
	var str='<option value="">请选择批号</option>';
	$.get(url,function(data){
		if(data!=null&&''!=data){
			for(var i=0,l=data.length;i<l;i++){
				str+='<option value="'+data[i].id+'">'+data[i].piName+
				'</option>';
			}
			$('#my_ss').html(str);
		}
	});
});
$('#my_ss').change(function(){
	var id =this.value;
	if(id!=''){
		var url ="/phone/getPic?id="+id;
		$.get(url,function(data){
			var ss ='';
			if(''!=data){
				ss+='<img src="'+data+'" </img>';
			}
			$('#my_img').html(ss);
		})
	}
});
</script>
</body>
</html>